<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>CHAOWU盲盒 - 商品详情</title>
    <link rel="stylesheet" href="details.css" />
  </head>
  <body>
    <div class="container">
      <!-- 1. 商品主页轮播图 -->
      <section class="main-carousel">
        <div class="carousel-wrapper">
          <div class="carousel-track">
            <!-- 图片列表JS填充 -->
          </div>
          <div class="track-left">
            <image src="./static/img/games.png" mode="scaleToFill" />
            <div class="tips">试玩</div>
          </div>
          <div class="track-right">
            <div class="items-list">
              <div class="item">
                <image src="./static/img/share.png" mode="scaleToFill" />
                <div class="tips">分享</div>
              </div>
              <div class="item">
                <image src="./static/img/box2.png" mode="scaleToFill" />
                <div class="tips">盒柜</div>
              </div>
              <div class="item">
                <image src="./static/img/rule.png" mode="scaleToFill" />
                <div class="tips">规则</div>
              </div>
              <div class="item">
                <image src="./static/img/more.png" mode="scaleToFill" />
                <div class="tips">更多</div>
              </div>
            </div>
            <div class="items-list"></div>
          </div>
        </div>
        <div class="tags-container">
          <div class="tag">传说：<span class="legendary">0.10%</span></div>
          <div class="tag">史诗：<span class="epic">1.50%</span></div>
          <div class="tag">稀有：<span class="rare">12.58%</span></div>
          <div class="tag">高级：<span class="advanced">85.62%</span></div>
        </div>
      </section>
      <div class="tag-tips"></div>

      <!-- 2. 以下商品随机一件（轮播图） -->
      <section class="random-item-carousel">
        <div class="carousel-top">
          <div class="carousel-title">以下商品随机一件</div>
          <div class="carousel-desc">投诉举报></div>
        </div>
        <div class="carousel-wrapper">
          <div class="carousel-track">
            <!-- 随机商品图片JS填充 -->
          </div>
        </div>
      </section>

      <!-- 3. 筛选组合 -->
      <section class="filter-section">
        <h3>保底商品池(共44款)</h3>
        <div class="filter-tabs">
          <button class="filter-btn active" data-filter="all">
            全部
            <span class="percentage">100%</span>
          </button>
          <button class="filter-btn" data-filter="legendary">
            传说
            <span class="percentage">0.03%</span>
          </button>
          <button class="filter-btn" data-filter="epic">
            史诗
            <span class="percentage">0.09%</span>
          </button>
          <button class="filter-btn" data-filter="rare">
            稀有
            <span class="percentage">4.88%</span>
          </button>
          <button class="filter-btn" data-filter="advanced">
            高级
            <span class="percentage">95.00%</span>
          </button>
        </div>

       <div class="product-list">
          <!-- 筛选后商品列表 -->
        </div>
      </section>
    </div>

    <!-- 4. 右下角回到顶部按钮 -->
    <button id="scrollTopBtn" title="回到顶部">↑</button>

    <!-- 5. 底部固定按钮 -->
    <div class="fixed-bottom-btns">
      <button id="openBoxBtn">立即开盒</button>
      <button id="openRedPacketBtn">开红包</button>
    </div>
    <div id="mask" class="mask hidden"></div>
    <div
      id="productDetailModal"
      class="modal hidden"
      role="dialog"
      aria-modal="true"
    >
      <div class="modal-header">
        <span>恭喜中奖</span>
        <button id="closeModalBtn" class="close-btn" aria-label="关闭弹窗">
          ×
        </button>
      </div>
      <div class="modal-content">
        <img
          src="https://web-assets.soutushenqi.com/upload/1732071683604.gif"
          alt="Apple AirTag 商品图"
        />
        <div class="product-info">
          <p><strong>¥249.00</strong> 参考价 &nbsp;&nbsp;&nbsp; 概率4.88%</p>
          <p>
            <span class="rarity">稀有</span> <strong>Apple/苹果AirTag</strong>
          </p>
        </div>
        <div class="guarantee-banner">
          <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
          </svg>
          全新正品·假一赔三·超时赔付
        </div>
      </div>
    </div>

    <script src="details.js"></script>
  </body>
</html>
